import React from 'react'
// import {Route} from 'react-router-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import News from '../news';
import Index from '../index';
import HouseList from '../houselist';
import Profile from '../profile';
import { TabBar } from 'antd-mobile';
import "./index.scss";

const tabItems = [
	{
		title: "首页",
		icon: "icon-ind",
		path: "/home"
	},
	{
		title: "找房",
		icon: "icon-findHouse",
		path: "/home/list"
	},
	{
		title: "资讯",
		icon: "icon-infom",
		path: "/home/news"
	},
	{
		title: "我的",
		icon: "icon-my",
		path: "/home/profile"
	}
]

export default class Home extends React.Component {
	state = {
		// 默认选择的tabbar
		selectedTab: this.props.location.pathname,
		//控制是否显示tabbar
		// hidden: false,
		// 控制 是否全屏
		// fullScreen: true,
	};
	// 渲染每个tabbar item 内容
	renderContent = () => {
		return (
			tabItems.map(item => <TabBar.Item
				title={item.title}
				key={item.path}
				icon={<i className={`iconfont ${item.icon}`} />}
				selectedIcon={<i className={`iconfont ${item.icon}`} />}
				selected={this.state.selectedTab === item.path}
				onPress={() => {
					this.setState({
						selectedTab: item.path,
					});
					this.props.history.push(item.path)
				}}
				data-seed="logId"
			>
			</TabBar.Item>)
		);
	}
    componentDidUpdate(preProps){
        if(preProps.location.pathname!=this.props.location.pathname){
            this.setState({
                selectedTab: this.props.location.pathname
            })
        }
    }
	render() {

		return (
			<div className="home">
				<Route exact path="/home" component={Index} />
				<Route path="/home/list" component={HouseList} />
				<Route path="/home/news" component={News} />
				<Route path="/home/profile" component={Profile} />
				<TabBar
					tintColor="#21b97a"
					barTintColor="white"
					noRenderContent="true"
				>
					{this.renderContent()}
				</TabBar>
			</div>

		)
	}
}